import {View, Button, Text, Image, Input} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import './index.less';
import kfLogo from './kf.png';
import Kfbg from './kfbg.jpg';
import {AtModal, AtModalHeader, AtModalContent, AtModalAction} from 'taro-ui';
import 'taro-ui/dist/style/components/modal.scss';

export default class Kf extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  render() {
    let {visible} = this.state;
    return (
      <View className="kf_box">
        <Image
          src={kfLogo}
          mode="aspectFill"
          className="kf-logo"
          onClick={() => {
            this.setState({visible: true});
          }}
        />

        {visible && (
          <>
            <AtModal isOpened>
              <AtModalContent>
                <Image src={Kfbg} mode="aspectFill" className="kf-bg" />
              </AtModalContent>
              <AtModalAction>
                <Button
                  onClick={() => {
                    this.setState({visible: false});
                  }}
                >
                  取消
                </Button>
                <Button
                onClick={()=>{
                    this.setState({visible: false});
                    Taro.makePhoneCall({phoneNumber:'4008750222'})
                }}
                >立即拨打</Button>
              </AtModalAction>
            </AtModal>
          </>
        )}
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
